<!DOCTYPE html>
<html>
  <head>
    <title>
        首页 - Se7en - 最好的Bootstrap后台主题框架
    </title>
    <meta charset="utf-8">
    <meta name="keywords" content="Bootstrap后台主题框架,ios7风格后台框架,响应式后台框架" />
    <meta name="description" content="Se7en是一个基于基于Bootstrap3的，仿ios7风格的，完全响应式的后台框架，内置了5套简单的皮肤模板，她还加入了近20个国外优秀的开源项目，并可简单组合与拆卸。" />
    <link href="css/afd4f9501333436c899d606225ecabda.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/font-awesome.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/se7en-font.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/isotope.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/jquery.fancybox.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/fullcalendar.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/wizard.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/select2.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/morris.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/datatables.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/datepicker.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/timepicker.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/colorpicker.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/bootstrap-switch.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/daterange-picker.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/typeahead.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/summernote.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/pygments.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
      <link href="css/green.css" media="all" rel="alternate stylesheet" title="green-theme" type="text/css" />
      <link href="css/orange.css" media="all" rel="alternate stylesheet" title="orange-theme" type="text/css" />
      <link href="css/magenta.css" media="all" rel="alternate stylesheet" title="magenta-theme" type="text/css" />
      <link href="css/gray.css" media="all" rel="alternate stylesheet" title="gray-theme" type="text/css" />
      <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
      <script src="js/jquery-ui.js" type="text/javascript"></script>
      <script src="js/bootstrap.min.js" type="text/javascript"></script>
      <script src="js/raphael.min.js" type="text/javascript"></script>
      <script src="js/selectivizr-min.js" type="text/javascript"></script>
      <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
      <script src="js/jquery.vmap.min.js" type="text/javascript"></script>
      <script src="js/jquery.vmap.sampledata.js" type="text/javascript"></script>
      <script src="js/jquery.vmap.world.js" type="text/javascript"></script>
      <script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
      <script src="js/fullcalendar.min.js" type="text/javascript"></script>
      <script src="js/gcal.js" type="text/javascript"></script>
      <script src="js/jquery.datatables.min.js" type="text/javascript"></script>
      <script src="js/datatable-editable.js" type="text/javascript"></script>
      <script src="js/jquery.easy-pie-chart.js" type="text/javascript"></script>
      <script src="js/excanvas.min.js" type="text/javascript"></script>
      <script src="js/jquery.isotope.min.js" type="text/javascript"></script>
      <script src="js/isotope_extras.js" type="text/javascript"></script>
      <script src="js/modernizr.custom.js" type="text/javascript"></script>
      <script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>
      <script src="js/select2.js" type="text/javascript"></script>
      <script src="js/styleswitcher.js" type="text/javascript"></script>
      <script src="js/wysiwyg.js" type="text/javascript"></script>
      <script src="js/summernote.min.js" type="text/javascript"></script>
      <script src="js/jquery.inputmask.min.js" type="text/javascript"></script>
      <script src="js/jquery.validate.js" type="text/javascript"></script>
      <script src="js/bootstrap-fileupload.js" type="text/javascript"></script>
      <script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
      <script src="js/bootstrap-timepicker.js" type="text/javascript"></script>
      <script src="js/bootstrap-colorpicker.js" type="text/javascript"></script>
      <script src="js/bootstrap-switch.min.js" type="text/javascript"></script>
      <script src="js/typeahead.js" type="text/javascript"></script>
      <script src="js/daterange-picker.js" type="text/javascript"></script>
      <script src="js/date.js" type="text/javascript"></script>
      <script src="js/morris.min.js" type="text/javascript"></script>
      <script src="js/skycons.js" type="text/javascript"></script>
      <script src="js/fitvids.js" type="text/javascript"></script>
      <script src="js/jquery.sparkline.min.js" type="text/javascript"></script>
      <script src="js/main-default.js" type="text/javascript"></script>
      <script src="js/respond.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  </head>
  <body>
    <div class="modal-shiftfix">
      <!-- Navigation -->
      <div class="navbar navbar-fixed-top scroll-hide">
        <div class="container-fluid top-bar">
          <div class="pull-right">
            <ul class="nav navbar-nav pull-right">

              <li class="dropdown notifications hidden-xs">

                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span aria-hidden="true" class="se7en-flag"></span>
                  <div class="sr-only">
                      通知
                  </div>
                  <p class="counter">
                    4
                  </p>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">
                    <div class="notifications label label-info">
                        新
                    </div>
                    <p>
                        新加入用户：王晓
                    </p></a>
                    
                  </li>
                  <li><a href="#">
                    <div class="notifications label label-info">
                        新
                    </div>
                    <p>
                        销售目标
                    </p></a>
                    
                  </li>
                  <li><a href="#">
                    <div class="notifications label label-info">
                        新
                    </div>
                    <p>
                        新性能指标
                    </p></a>
                    
                  </li>
                  <li><a href="#">
                    <div class="notifications label label-info">
                        新
                    </div>
                    <p>
                        提供新的经济增长数据
                    </p></a>
                    
                  </li>
                </ul>
              </li>
              <li class="dropdown messages hidden-xs">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span aria-hidden="true" class="se7en-envelope"></span>
                  <div class="sr-only">
                         消息
                  </div>
                  <p class="counter">
                    3
                  </p>
                </a>
                <ul class="dropdown-menu messages">
                  <li><a href="#">
                    <img width="34" height="34" src="picture/avatar-male2.png" />我们可以见面吗？我想...</a>
                  </li>
                  <li><a href="#">
                    <img width="34" height="34" src="picture/avatar-female.png" />重要的数据需要分析...</a>
                  </li>
                  <li><a href="#">
                    <img width="34" height="34" src="picture/avatar-male2.png" />Se7en是一款不错的主题。</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown settings hidden-xs">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span aria-hidden="true" class="se7en-gear"></span>
                  <div class="sr-only">
                         设置
                  </div>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="settings-link blue" href="javascript:chooseStyle('none', 30)"><span></span>蓝色</a>
                  </li>
                  <li>
                    <a class="settings-link green" href="javascript:chooseStyle('green-theme', 30)"><span></span>绿色</a>
                  </li>
                  <li>
                    <a class="settings-link orange" href="javascript:chooseStyle('orange-theme', 30)"><span></span>橘黄色</a>
                  </li>
                  <li>
                    <a class="settings-link magenta" href="javascript:chooseStyle('magenta-theme', 30)"><span></span>品红</a>
                  </li>
                  <li>
                    <a class="settings-link gray" href="javascript:chooseStyle('gray-theme', 30)"><span></span>灰色</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown user hidden-xs"><a data-toggle="dropdown" class="dropdown-toggle" href="#">
                <img width="34" height="34" src="picture/avatar-male.jpg" />管理员<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">
                    <i class="icon-user"></i>我的账户</a>
                  </li>
                  <li><a href="#">
                    <i class="icon-gear"></i>账户设置</a>
                  </li>
                  <li><a href="login1.html">
                    <i class="icon-signout"></i>退出</a>
                  </li>
                </ul>
              </li>              
            </ul>
          </div>
          <button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="logo" href="index.html">se7en</a>
          <form class="navbar-form form-inline col-lg-2 hidden-xs">
            <input class="form-control" placeholder="搜索" type="text">            
          </form>
        </div>
        <div class="container-fluid main-nav clearfix">
          <div class="nav-collapse">
            <ul class="nav">
              <li>
                <a class="current" href="index.html"><span aria-hidden="true" class="se7en-home"></span>控制台</a>
              </li>
              <li><a href="social.html">
                <span aria-hidden="true" class="se7en-feed"></span>社交订阅</a>
              </li>
              <li class="dropdown"><a data-toggle="dropdown" href="#">
                <span aria-hidden="true" class="se7en-star"></span>特色<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="buttons.html">按钮</a>
                  </li>
                  <li>
                    <a href="fontawesome.html">Font Awesome Icons</a>
                  </li>
                  <li><a href="glyphicons.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                      Glyphicons
                    </p></a>
                    
                  </li>
                  <li>
                    <a href="components.html">组件</a>
                  </li>
                  <li>
                    <a href="widgets.html">小工具</a>
                  </li>
                  <li>
                    <a href="typo.html">排版</a>
                  </li>
                  <li>
                    <a href="grid.html">栅格</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown"><a data-toggle="dropdown" href="#">
                <span aria-hidden="true" class="se7en-forms"></span>表单<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="form-components.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                        表格组件
                    </p></a>
                    
                  </li>
                  <li>
                    <a href="form-advanced.html">高级形式</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown"><a data-toggle="dropdown" href="#">
                <span aria-hidden="true" class="se7en-tables"></span>表格<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="tables.html">基本表格</a>
                  </li>
                  <li>
                    <a href="datatables.html">数据表格</a>
                  </li>
                  <li><a href="datatables-editable.html">
                    <div class="notifications label label-warning">
                        新
                    </div>
                    <p>
                        编辑数据表格
                    </p></a>
                    
                  </li>
                </ul>
              </li>
              <li><a href="charts.html">
                <span aria-hidden="true" class="se7en-charts"></span>图表</a>
              </li>
              <li class="dropdown"><a data-toggle="dropdown" href="#">
                <span aria-hidden="true" class="se7en-pages"></span>页面<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="chat.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                        图表
                    </p></a>
                  </li>
                  <li>
                    <a href="calendar.html">日历</a>
                  </li>
                  <li><a href="timeline.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                             时间轴
                    </p></a>
                    
                  </li>
                  <li><a href="login1.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                          登录(1)
                    </p></a>
                    
                  </li>
                  <li>
                    <a href="login2.html">登录(2)</a>
                  </li>
                  <li><a href="signup1.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                          注册(1)
                    </p></a>
                    
                  </li>
                  <li>
                    <a href="signup2.html">注册(2)</a>
                  </li>
                  <li><a href="invoice.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                          订单
                    </p></a>
                    
                  </li>
                  <li><a href="faq.html">
                    <span class="notifications label label-warning">新</span>
                    <p>
                      FAQ
                    </p></a>
                    
                  </li>
                  <li>
                    <a href="filters.html">筛选结果</a>
                  </li>
                  <li>
                    <a href="404-page.html">404页面</a>
                  </li>
                </ul>
              </li>
              <li><a href="gallery.html">
                <span aria-hidden="true" class="se7en-gallery"></span>相册</a>
              </li>
              <li><a href="docs/index.html" target="_blank">
                  <span aria-hidden="true" class="se7en-doc"></span>帮助文档</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- End Navigation -->
      <div class="container-fluid main-content">
        <!-- Statistics -->
        <div class="row">
          <div class="col-lg-12">
            <div class="widget-container stats-container">
              <div class="col-md-3">
                <div class="number">
                  <div class="icon globe"></div>
                  86<small>%</small>
                </div>
                <div class="text">
                    整体增长
                </div>
              </div>
              <div class="col-md-3">
                <div class="number">
                  <div class="icon visitors"></div>
                  613
                </div>
                <div class="text">
                    访问者
                </div>
              </div>
              <div class="col-md-3">
                <div class="number">
                  <div class="icon money"></div>
                  <small>&yen;</small>924
                </div>
                <div class="text">
                    销售额
                </div>
              </div>
              <div class="col-md-3">
                <div class="number">
                  <div class="icon chat-bubbles"></div>
                  325
                </div>
                <div class="text">
                    新关注
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Statistics -->
        <div class="row">
          <!-- Weather -->
          <div class="col-md-8">
            <div class="widget-container weather">
              <div class="widget-content padded">
                <div class="row text-center">
                  <div class="col-sm-6 col-md-6 col-lg-4 today">
                    <p>
                         今日
                    </p>
                    <canvas class="skycons-element" data-skycons="RAIN" height="100" id="rain" width="100"></canvas>
                    <div class="number">
                      72<small>&deg;</small>
                    </div>
                    <p class="location">
                         北京
                    </p>
                  </div>
                  <div class="col-sm-2 hidden-xs">
                    <p>
                         星期一
                    </p>
                    <canvas class="skycons-element" data-skycons="CLEAR_DAY" height="60" id="clear-day" width="60"></canvas>
                    <div class="number">
                      86<small>&deg;</small>
                    </div>
                  </div>
                  <div class="col-sm-2 hidden-xs">
                    <p>
                         星期二
                    </p>
                    <canvas class="skycons-element" data-skycons="RAIN" height="60" id="cloudy" width="60"></canvas>
                    <div class="number">
                      75<small>&deg;</small>
                    </div>
                  </div>
                  <div class="col-sm-2 hidden-xs">
                    <p>
                         星期三
                    </p>
                    <canvas class="skycons-element" data-skycons="PARTLY_CLOUDY_DAY" height="60" id="partly-cloudy-day" width="60"></canvas>
                    <div class="number">
                      82<small>&deg;</small>
                    </div>
                  </div>
                  <div class="col-sm-2 hidden-md hidden-sm hidden-xs">
                    <p>
                        星期四
                    </p>
                    <canvas class="skycons-element" data-skycons="SLEET" height="60" id="sleet" width="60"></canvas>
                    <div class="number">
                      64<small>&deg;</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end Weather --><!-- Bar Graph -->
          <div class="col-md-4">
            <div class="widget-container small">
              <div class="heading">
                <i class="icon-signal"></i>新注册<i class="icon-list pull-right"></i><i class="icon-refresh pull-right"></i>
              </div>
              <div class="widget-content padded">
                <div class="bar-chart-widget">
                  <div class="chart-graph">
                    <div id="barcharts">
                         加载中…
                    </div>
                    <ul class="chart-text-axis">
                      <li>
                        1
                      </li>
                      <li>
                        2
                      </li>
                      <li>
                        3
                      </li>
                      <li>
                        4
                      </li>
                      <li>
                        5
                      </li>
                      <li>
                        6
                      </li>
                      <li>
                        7
                      </li>
                      <li>
                        8
                      </li>
                      <li>
                        9
                      </li>
                      <li>
                        10
                      </li>
                      <li>
                        11
                      </li>
                      <li>
                        12
                      </li>
                      <li>
                        13
                      </li>
                      <li>
                        14
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Bar Graph -->
        </div>
        <div class="row">
          <!-- Area Charts:Morris -->
          <div class="col-md-6">
            <div class="widget-container fluid-height">
              <div class="heading">
                <i class="icon-bar-chart"></i>面积图
              </div>
              <div class="widget-content padded text-center">
                <div class="graph-container">
                  <div class="caption"></div>
                  <div class="graph" id="hero-area"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- Area Charts:Morris --><!-- Chat -->
          <div class="col-md-6">
            <div class="widget-container scrollable chat" style="height: 427px;">
              <div class="heading">
                <i class="icon-comments"></i>聊天工具<i class="icon-smile pull-right"></i>
              </div>
              <div class="widget-content padded">
                <ul>
                  <li>
                    <img width="30" height="30" src="picture/avatar-male.jpg" />
                    <div class="bubble">
                      <a class="user-name" href="#">管理员</a>
                      <p class="message">
                          有些人离开了之后才发现，离开的人是自己的最爱。——《东邪西毒》
                      </p>
                      <p class="time">
                        <strong>今天 </strong>下午 3:53
                      </p>
                    </div>
                  </li>
                  <li class="current-user">
                    <img width="30" height="30" src="picture/avatar-female.jpg" />
                    <div class="bubble">
                      <a class="user-name" href="#">王晓</a>
                      <p class="message">
                          尽管你一脸不真诚，但我听着很高兴。——《梦想照进现实》
                      </p>
                      <p class="time">
                        <strong>今天 </strong>下午 3:53
                      </p>
                    </div>
                  </li>
                  <li>
                    <img width="30" height="30" src="picture/avatar-male.jpg" />
                    <div class="bubble">
                      <a class="user-name" href="#">管理员</a>
                      <p class="message">
                          眼泪是我的望远镜。透过它，我见到天堂。——《爱的太迟》
                      </p>
                      <p class="time">
                        <strong>今天 </strong>下午 3:53
                      </p>
                    </div>
                  </li>
                  <li>
                    <img width="30" height="30" src="picture/avatar-male.jpg" />
                    <div class="bubble">
                      <a class="user-name" href="#">管理员</a>
                      <p class="message">
                          那些流泪的人真的是为了爱吗？ ——《盛夏光年》
                      </p>
                      <p class="time">
                        <strong>今天 </strong>下午 3:53
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="post-message">
                <input class="form-control" placeholder="请输入您需要发送的信息…" type="text"><input type="submit" value="发送">
              </div>
            </div>
          </div>
          <!-- End Chat -->
        </div>
        <div class="row">
          <!-- Pie Graph 1 -->
          <div class="col-lg-5">
            <div class="widget-container fluid-height">
              <div class="heading">
                <i class="icon-bar-chart"></i>环形图
              </div>
              <div class="widget-content clearfix">
                <div class="col-sm-6">
                  <div class="pie-chart1 pie-chart pie-number" data-percent="87">
                    87%
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="pie-chart2 pie-chart pie-number" data-percent="26">
                    26%
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-7">
            <div class="widget-container fluid-height">
              <!-- Table -->
              <table class="table table-filters">
                <tbody>
                  <tr>
                    <td class="filter-category blue">
                      <div class="arrow-left"></div>
                      <i class="icon-stethoscope"></i>
                    </td>
                    <td>
                        医疗行业
                    </td>
                    <td>
                      &yen;9204
                    </td>
                    <td class="hidden-xs">
                      <div class="sparkslim">
                        50,55,60,40,30,35,30,20,25,30,40,20,15
                      </div>
                    </td>
                    <td>
                      <div class="danger">
                        -4%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="filter-category green">
                      <div class="arrow-left"></div>
                      <i class="icon-coffee"></i>
                    </td>
                    <td>
                         餐饮行业
                    </td>
                    <td>
                      &yen;23,890
                    </td>
                    <td class="hidden-xs">
                      <div class="sparkslim">
                        5,10,15,50,80,50,40,30,50,60,70,75,75
                      </div>
                    </td>
                    <td>
                      <div class="success">
                        +12%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="filter-category orange">
                      <div class="arrow-left"></div>
                      <i class="icon-gamepad"></i>
                    </td>
                    <td>
                        游戏行业
                    </td>
                    <td>
                      &yen;10,995
                    </td>
                    <td class="hidden-xs">
                      <div class="sparkslim">
                        100,100,80,70,40,20,20,40,50,60,70
                      </div>
                    </td>
                    <td>
                      <div class="success">
                        +5%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="filter-category red">
                      <div class="arrow-left"></div>
                      <i class="icon-gift"></i>
                    </td>
                    <td>
                         礼品行业
                    </td>
                    <td>
                      &yen;6,790
                    </td>
                    <td class="hidden-xs">
                      <div class="sparkslim">
                        5,10,15,20,30,40,80,100,120,120,140
                      </div>
                    </td>
                    <td>
                      <div class="success">
                        +26%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="filter-category blue">
                      <div class="arrow-left"></div>
                      <i class="icon-stethoscope"></i>
                    </td>
                    <td>
                      ……
                    </td>
                    <td>
                      &yen;9204
                    </td>
                    <td class="hidden-xs">
                      <div class="sparkslim">
                        50,55,60,40,30,35,30,20,25,30,40,20,15
                      </div>
                    </td>
                    <td>
                      <div class="danger">
                        -4%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="filter-category magenta">
                      <div class="arrow-left"></div>
                      <i class="icon-trophy"></i>
                    </td>
                    <td>
                      ……
                    </td>
                    <td>
                      &yen;22,156
                    </td>
                    <td class="hidden-xs">
                      <div class="sparkslim">
                        20,40,50,60,70,80,90,95,100,80,70,60
                      </div>
                    </td>
                    <td>
                      <div class="danger">
                        -4%
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- End Pie Graph 1 -->
        </div>
      </div>
    </div>
  </body>
</html>